// 作用:Webpack打包的入口文件
// 导入Vue的构造函数
import Vue from 'vue'
// 导入第三方重置样式模块
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
// 导入ElementUI整个组件
import ElementUI from 'element-ui'
// 导入ElementUI整个组件的样式
import 'element-ui/lib/theme-chalk/index.css'
// 导入ElementUI的英文语音包
import elementEN from 'element-ui/lib/locale/lang/en'
// 导入中文语言包
import elementZH from 'element-ui/lib/locale/lang/zh-CN'// lang i18n
// 导入自己的英文语言包
import customEN from './lang/en'
// 导入中文语言包
import customZH from './lang/zh'
// 导入自己的样式文件
// sass/scss/less 都是对数据做预处理的
import '@/styles/index.scss' // global css
// 导入项目根组件
import App from './App'
// 导入store实例
import store from './store'
// 导入路由实例
import router from './router'

// 导入所有字体图标
import '@/icons' // icon
// 导入权限控制文件
import '@/permission' // permission control
// 导入自定义指令
import '@/directive'
import Print from 'vue-print-nb'
Vue.use(Print)
// 注册全局组件
import 'element-theme-chalk'
import ThemePicker from '@/components/ThemePicker'

import PageTools from '@/components/PageTools'
import UploadExcel from '@/components/UploadExcel'
import ImageUpload from '@/components/ImageUpload'
import ScreenFull from '@/components/ScreenFull'
import lang from '@/components/lang'
Vue.component('lang', lang)
Vue.component('ThemePicker', ThemePicker)
Vue.component('ScreenFull', ScreenFull)
Vue.component('ImageUpload', ImageUpload)
Vue.component('UploadExcel', UploadExcel)
Vue.component('PageTools', PageTools)

Vue.prototype.$checkPerm = function(key) {
  // 拿到vuex中的points数组，
  const { points } = store.state.user.userInfo.roles
  return points.includes(key)
}
// this.$checkPerm()

// 注册ElementUI的全部组件，并提供英文语言模式
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

Vue.config.productionTip = false
// 多语言切换
// 1.下包 yarn add vue-i18n@8 -S
// 2.引入
import VueI18n from 'vue-i18n'
// 3.注册
Vue.use(VueI18n)
// 4.定义翻译规则
const messages = {
  zh: {
    // 对象展开到新对象中
    ...elementZH,
    ...customZH
  },
  en: {
    ...elementEN,
    ...customEN
  }
}
import Cookies from 'js-cookie'
// 5.创建i18n实例
const i18n = new VueI18n({
  // 刷新页面的时候取出cookie的值
  locale: Cookies.get('language') || 'zh', // 默认的语言，zh表示中文
  messages// 翻译的规则
})
// 6.注入
// 实例化 vm 实例
new Vue({
  // 注入router实例
  router,
  // 注入store实例
  store,
  // 注入i18n实例
  i18n, // 提供全局$t方法进行语言的切换
  // 渲染函数，把根组件App的内容渲染到id=app的盒子位置
  // id=app的盒子在public/index.html文件中
  render: h => h(App)
}).$mount('#app')

// nvm切换node版本:
// 1.全局安装nvm ：npm i nvm -g
// 2.查看所有的node版本：nvm ls
// 3.切换版本：nvm use 指定版本
// 4.查看node版本:node -v

// 字符串的substr、substring、slice3个方法
// 作用:字符串的截取(提取)
// const str = 'love'
// console.log(str.substring(2))
// console.log(str.slice(2))

// 原始版遍历对象 for-in循环
// Object.keys(对象)：把对象的键以数组的形式返回
// Array.sort() 升序降序
// Array.filter()
// key.startsWith('a')

// const obj = {
//   '入职日期': 44244,
//   '姓名': '宋轶',
//   '工号': 88088,
//   '手机号': 15751786628,
//   '转正日期': 44450
// }
// const zh2enkey = {
//   '入职日期': 'timeOfEntry',
//   '姓名': 'username',
//   '工号': 'workNumber',
//   '手机号': 'mobile',
//   '转正日期': 'correctionTime'
// }
// const item1 = {}
// // 得到由obj里的key为item的数组
// Object.keys(obj).map(item => {
//   // 得到zh2里面的英文值
//   const enkey = zh2enkey[item]
//   // obj中文key对应的每个值
//   // console.log(obj[item])
//   item1[enkey] = obj[item]
// })
// console.log(item1)
// 把对象里面的key变为数组
// const arr = Object.keys(obj)
// console.log(arr)
// const item = {}
// Object.keys(obj).forEach(key => {
//   // key中文key
//   const enkey = zh2enkey[key]
//   // 给item新增enkey属性，赋值
//   item[enkey] = obj[key]
// })
// console.log(item)

// 页面/路由的访问权的核心实现思路:
// 1.主页左侧菜单基于路由表动态生成的(控制左侧菜单的不同只需要控制路由表即可)
// 2.路由表划分为静态路由表和动态路由表，控制权限的不同就是在控制动态路由表
// 3.路由全局前置守卫中，根据基于请求到的用户菜单，对动态路由表做筛选(比对路由规则的名字是否在用户菜单数组中)
// 4.把筛选的结果动态的追加到路由表中，router.addRoutes（今后输入path可以看到component）
// 5.vuex管理一份路由表，同步相应的左侧菜单的显示(因为route.options.routes不是响应式的)

// 按钮的操作权，三种实现思路:
// 实现方式：
// 1.是否渲染(v-if)  2.是否禁用(:disabled)  3.代码中逻辑判断(有权限放行，否则直接return)
// 代码中:
// 1.自定义全局指令(v-perm)
//  判断指令绑定表达式的值是否在vuex中的用户权限点的数组中
// 2.给vue新增原型方法($checkPermission)
//  判断方法参数值是否在vuex中的用户权限点数组中

// 请求头:request公共请求函数 详情看utils的request
// 全局前置守卫:router.beforeEach(()=>{})

// 对象嵌套 浅拷贝 把对象展开放到一个新对象里面
// 深拷贝 lodash
// watch语法:需要赋值深度监听
// 侦听目标:data/computed/props
// watch:{
//   Object(newval){

//   }
// }
